<!-- eslint-disable -->
<template>
  <el-form :model="props.formItem" label-width="100" class="p-2 ">
    <el-form-item label="标签名称">
      <el-input v-model.trim="props.formItem.label" />
    </el-form-item>
    <el-form-item label="表单字段" required prop="field" >
      <el-input v-model.trim="props.formItem.field" />
    </el-form-item>
    <el-form-item label="栅格宽度">
      <el-input v-model.number="props.formItem.col" placeholder="默认24" />
    </el-form-item>
    <FormRulesConfig :form-item="props.formItem" />
    <el-form-item label="选项来源">
      <el-select v-model="props.formItem.optionsFrom" @change="(val)=>{changeOptionsFrom(val,props.formItem)}">
        <el-option label="静态数据" value="custom" />
        <el-option label="后端api" value="backendApi" />
        <!--        <el-option label="前端api" value="frontendApi" />-->
        <!--        <el-option label="字典数据" value="dict" />-->
      </el-select>
    </el-form-item>
    <el-form-item label="前端定义Api" v-if="props.formItem.optionsFrom === 'frontendApi'">
      <el-input v-model="props.formItem.optionsApi" />
    </el-form-item>
    <el-form-item label="请求方式" v-if="props.formItem.optionsFrom === 'backendApi'">
      <el-select v-model="props.formItem.optionsApiType">
        <el-option label="GET" value="get" />
        <el-option label="POST" value="post" />
      </el-select>
    </el-form-item>
    <el-form-item label="接口名称" v-if="props.formItem.optionsFrom === 'backendApi'">
      <el-input v-model="props.formItem.optionsApi" />
    </el-form-item>
    <el-form-item label="是否立即请求" v-if="props.formItem.optionsFrom === 'backendApi' || props.formItem.optionsFrom === 'frontendApi'">
      <el-switch v-model="props.formItem.optionsImmediate" />
    </el-form-item>
    <VAceEditor
        v-if="props.formItem.optionsFrom === 'custom'"
        v-model:value="optionsData"
        lang="javascript"
        theme="chrome"
        class="w-full h-40"
    />
    <el-form-item label="选项配置:" label-width="240" style="margin-bottom: 0" />
    <VAceEditor
        v-model:value="propsData"
        lang="javascript"
        theme="chrome"
        class="w-full h-44"
    />
    <el-form-item label="是否多选">
      <el-switch v-model="props.formItem.multiple" />
    </el-form-item>
    <el-form-item label="是否收起多选值" label-width="150" v-if="props.formItem.multiple">
      <el-switch v-model="props.formItem.collapseTags" />
    </el-form-item>
    <el-form-item label="是否显示多选值" label-width="150" v-if="props.formItem.multiple">
      <el-switch v-model="props.formItem.collapseTagsTooltip" />
    </el-form-item>
    <el-form-item label="选项字典类型" v-if="props.formItem.optionsFrom === 'dict'">
      <el-input v-model="props.formItem.dictType" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="是否每级可选">
      <el-switch v-model="props.formItem.checkStrictly" />
    </el-form-item>
    <el-form-item label="是否展开全部">
      <el-switch v-model="props.formItem.defaultExpandAll" />
    </el-form-item>
    <el-form-item label="是否可筛选">
      <el-switch v-model="props.formItem.filterable" />
    </el-form-item>
    <el-form-item label="是否可清除">
      <el-switch v-model="props.formItem.clearable" />
    </el-form-item>
    <el-form-item label="是否只读">
      <el-switch v-model="props.formItem.readonly" />
    </el-form-item>
    <el-form-item label="是否禁用">
      <el-switch v-model="props.formItem.disabled" />
    </el-form-item>
    <el-form-item label="是否在body下">
      <el-switch v-model="props.formItem.teleported" />
    </el-form-item>
    <el-form-item label="是否多选">
      <el-switch v-model="props.formItem.multiple" />
    </el-form-item>
    <el-form-item label="占位文字">
      <el-input v-model="props.formItem.placeholder" placeholder="请选择" />
    </el-form-item>
    <el-form-item label="样式类名">
      <el-input v-model="props.formItem.className" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="弹出窗类名">
      <el-input v-model="props.formItem.popperClass" placeholder="请输入" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts" name="TreeSelect">
import FormRulesConfig from './FormRulesConfig.vue'
import { VAceEditor } from 'vue3-ace-editor'
import { ref, watch } from 'vue'
const props = defineProps<{ formItem: SubmitFormSchema }>()
const customOptions =
  '[{\n    "label":"选项一",\n    "value":"1",\n    "children":[{\n        "label":"选项二",\n        "value":2\n    }]\n}]'
const changeOptionsFrom = (val, formItem: SubmitFormSchema) => {
  switch (val) {
    case 'custom': {
      formItem.options = JSON.parse(customOptions)
      optionsData.value = customOptions
      break
    }
    default: {
      formItem.options = []
      break
    }
  }
}
// 转换行格式
const getVAceEditorNeedStrFormat = str => {
  return str.replace(/\{/g, '{\n  ').replace(/,/g, ',\n  ').replace(/\}/g, '\n}')
}
const option: string =
  props.formItem.options && props.formItem.options.length > 0
    ? getVAceEditorNeedStrFormat(JSON.stringify(props.formItem.options))
    : customOptions
const optionsData = ref(option)
watch(
  optionsData,
  val => {
    try {
      if (val) {
        props.formItem.options = JSON.parse(val)
      }
    } catch (e) {
      console.log(e)
    }
  },
  { immediate: true }
)
const stringifyProps: string =
  props.formItem.props && Object.keys(props.formItem.props).length > 0
    ? getVAceEditorNeedStrFormat(JSON.stringify(props.formItem.props))
    : '{\n    "label":"label",\n    "value":"value",\n    "children":"children",\n    "emitPath":false,\n    "checkStricyly":false,\n    "multiple":false,\n    "expandTrigger":"click"\n}'
const propsData = ref(stringifyProps)
watch(
  propsData,
  val => {
    if (val) {
      props.formItem.props = JSON.parse(val)
    }
  },
  { immediate: true }
)
</script>
